import React from 'react';
import { Icon } from 'antd';
import { Map, Markers  } from 'react-amap';
import config from '../../config/index';
const style = {
  width: '28px',
  height: '28px',
  borderRadius: '50%',
  color: '#eee',
  fontSize: '28px',
}
const start = {
  ...style,
  backgroundColor: 'green',
};
const end = {
  ...style,
  backgroundColor: 'red',
};
export default class MapApp extends React.Component {
    mapKey = config.MAP_KEY;
    renderMarkerLayout = (extData) => {
      if (extData.position.index === 0){
        return <Icon style={start} type="play-circle-o" />
      }
      return <Icon style={end} type="pause-circle-o" />
    }
    render() {
      return <div style={{ width: '100%', height: 200 }}>
        <Map zoom={16} amapkey={this.mapKey} center={this.props.mapCenter}>
          <Markers  markers={this.props.mapMarker} render={this.renderMarkerLayout}/>
        </Map>
      </div>
    }
  }